<template>
	<!-- banner轮播 -->
	<view class="diy-banner">
		<swiper
			:autoplay="autoplay"
			:class="'banner-box swiper-box dot-' + itemStyle.btnShape"
			:duration="duration"
			:circular="true"
			:indicator-dots="indicatorDots"
			:interval="params.interval"
			:indicator-color="itemStyle.btnColor"
			indicator-active-color="#000"
			@change="bindChange"
			:data-item-key="itemIndex"
			:style="{ height: imgHeights[imgCurrent] + 'rpx' }"
		>
			<swiper-item v-for="(banner, index) in dataList" :key="index"><image mode="widthFix" @tap="navigationTo" :data-url="banner.linkUrl" class="slide-image" @load="imagesHeight" :src="banner.imgUrl" :data-id="index" :data-item-key="itemIndex" /></swiper-item>
		</swiper>
		<!-- 顶部置灰 -->
		<!-- <view class="linear"></view>  -->
	</view>
</template>

<script>
export default {
	props: {
		itemIndex: String,
		itemStyle: Object,
		dataList: Array,
		params: Object
	},
	data() {
		return {
			// banner轮播组件属性
			indicatorDots: true, // 是否显示面板指示点
			autoplay: true, // 是否自动切换
			duration: 800, // 滑动动画时长

			imgHeights: [], // 图片的高度
			imgCurrent: 0 // 当前banne所在滑块指针
		};
	},
	methods: {
		/**
		 * 计算图片高度
		 */
		imagesHeight(e) {
			setTimeout(() => {
				// 获取图片真实宽度
				let imgwidth = e.detail.width;
				let imgheight = e.detail.height;
				// 宽高比
				let ratio = imgwidth / imgheight;
				// 计算的高度值
				let viewHeight = 750 / ratio;
				let imgHeights = this.imgHeights;
				// 把每一张图片的高度记录到数组里
				imgHeights.push(viewHeight);
				this.imgHeights = imgHeights;
			}, 100);
		},
		/**
		 * 记录当前指针
		 */
		bindChange(e) {
			this.imgCurrent = e.detail.current;
		},
		/**
		 * 跳转到指定页面
		 */
		navigationTo(e) {
			const url = e.currentTarget.dataset.url;
			if (url) {
				this.navigateTo({ url: '/' + e.currentTarget.dataset.url });
			}
		}
	}
};
</script>

<style>
/* banner轮播 */

.diy-banner {
	position: relative;
}

.diy-banner .slide-image {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: block;
}

/* 顶部置灰 */

.diy-banner .linear {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3.4rem;
	background: linear-gradient(#111, transparent);
	opacity: 0.6;
	z-index: 9;
}

.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
	margin-bottom: 2rpx;
}

/* banner组件按钮 */

.swiper-box .wx-swiper-dot {
	height: 20rpx;
	width: 20rpx;
}

.swiper-box.dot-rectangle .wx-swiper-dot {
	width: 30rpx;
	border-radius: unset;
}

.swiper-box.dot-square .wx-swiper-dot {
	border-radius: unset;
}
</style>
